<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <title>资源图示</title>
  <script src="/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div style="width: 100%;height: 1100px;">
  <div style="margin:10px;width: 40%;height:50%;float: left;border-width: 3px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
    <div id="cars" style="padding: 5px;width: 100%;height: 100%"></div>
  </div>
  <div style="margin:10px;width: 55%;height:50%;float: left;border-width: 3px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
    <div id="recieve" style="padding: 10px;width: 100%;height: 100%"></div>
  </div>
  <div style="margin:10px;width: 55%;height:50%;float: left;border-width: 3px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
    <div id="main" style="padding: 10px;width: 100%;height: 100%"></div>
  </div>
  <div style="margin:10px;width: 40%;height:50%;float: left;border-width: 3px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
    <div id="task" style="padding: 10px;width: 100%;height: 100%"></div>
  </div>
</div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  var myCar = echarts.init(document.getElementById('cars'));
  var recieve = echarts.init(document.getElementById('recieve'));
  var task = echarts.init(document.getElementById('task'));
  // 指定图表的配置项和数据
  var ChartOption = {
    title: {
      text: '救护车司机任务量'
    },
    tooltip: {},
    legend: {
      data:['救护车司机任务量']
    },
    xAxis: {
      data: ["韩国凯","丁飞青","胡增考","刘坚","刘翔","刘汉智","娄磊","马卿","潘军","孙刚"]
    },
    yAxis: {},
    series: [{
      name: '救护车司机任务量',
      type: 'bar',
      data: [2, 3, 0, 6, 9, 4, 5, 0, 3, 4]
    }]
  };

  var CarOption = {
    title: {
      text: '已分配救护车资源',
      textStyle:{
        fontSize: 18
      }
    },
    series: [{
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'auto',
        distance: 40,
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '已分配：{value}辆',
        color: 'auto'
      },
      data: [{
        value: 29
      }],
      max:40
    }]
  };

  var recieveOption = {
    title: {
      text: '部门昨日接收病人数量',
      textStyle:{
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['昨日接收病人数量']
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['','']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '昨日接收病人数量',
      data: ['',''],
      type: 'line',
      smooth: true
    }]
  };

  var taskOption = {
    title: {
      text: '司机任务达标数'
    },
    legend: {
      data: ['任务指标', '已完成任务']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '韩国凯', max: 15},
        { name: '丁飞青', max: 15},
        { name: '胡增考', max: 15},
        { name: '刘坚', max: 15},
        { name: '刘翔', max: 15},
        { name: '刘汉智', max: 15},
        { name: '娄磊', max: 15},
        { name: '马卿', max: 15},
        { name: '潘军', max: 15},
      ],
    },
    series: [{
      name: '预算 vs 开销（Budget vs spending）',
      type: 'radar',
      data: [
        {
          value: [9,11,7,10,9,6,8,10,9],
          name: '任务指标'
        },
        {
          value: [8, 6, 4, 8, 7, 9, 6, 5, 11],
          name: '已完成任务'
        }
      ]
    }]
  };

  for(var i = 0; i <= 24; i+=2){
    recieveOption.xAxis.data[i/2] = i;
    recieveOption.series[0].data[i/2] = Math.round(Math.random()*5)
    recieve.setOption(recieveOption)
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(ChartOption);
  myCar.setOption(CarOption)
  task.setOption(taskOption)
</script>
<script th:inline="javascript">
</script>
</body>
</html>